<template>
  <div class="recommend">
    <!-- 推荐 -->
    <div class="mainFooter">
      <div class="mainBox">
        <h3>·优品推荐·</h3>
      </div>
      <!-- 渲染推荐 -->
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(v, i) in list" :key="i">
          <div class="dl" v-for="(j, k) in v" :key="k" @click="detail(j.id)">
            <div>
              <img :src="j.image" alt="" />
            </div>
            <div class="dd">
              {{ j.store_name }}
            </div>
            <div class="dd" style="color: red">￥{{ j.price }}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { detail } from "@/api/request";
import lazyLoad from "../../public/lazyLoad";
export default {
  directives: {
    lazyLoad,
  },
  data() {
    return {
      // 详情页
      details: [],
      superior: [],
      list: [],
    };
  },
  methods: {
    // 详情页
    detail(val) {
      this.$router.push(`/detail?id=${val} `);
    },
    // 推荐轮播
    foos(num, arr) {
      let newArr = [];
      while (arr.length > 0) {
        newArr.push(arr.splice(0, num));
      }
      return newArr;
    },
  },
  created() {
    // 获取详情页的id数据
    detail(this.$route.query.id).then((res) => {
      // 优品推荐
      this.superior = res.data.data.good_list;
      this.list = this.foos(6, res.data.data.good_list);
    });
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.mainFooter {
  width: 100%;
  float: left;
  background: white;
  height: 100%;
  margin-top: 3%;
  .dl {
    width: 30%;
    height: 150px;
    background: white;
    float: left;
    margin-left: 2%;
    margin-top: 2%;
    .dd {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    img {
      width: 100%;
      height: 100px;
    }
  }
  .mainBox {
    width: 100%;
    text-align: center;
    color: red;
  }
}
</style>